<template>
    <view class="custom-tabbar safe-area-bottom">
        <view
            v-for="item in tabs"
            :key="item.key"
            class="tab-item"
            :class="{ active: active === item.key }"
            @click="switchTo(item.path)"
        >
            <image :src="item.icon" class="tab-icon" mode="aspectFit" />
        </view>
    </view>
    <view class="tabbar-placeholder"></view>
</template>

<script setup>
import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useUserStore } from '@/store/user.js'

const props = defineProps({
    active: { type: String, default: '' }
});

const userStore = useUserStore()
const { userType } = storeToRefs(userStore)
const isBrand = computed(() => typeof userType.value === 'string' && /brand/i.test(userType.value))
const tabs = computed(() => [
    { key: 'home', path: '/pages/home/home', icon: '/static/tabbar/home.png' },
    { key: 'person', path: isBrand.value ? '/pages/brand/brand' : '/pages/person/person', icon: '/static/tabbar/person.png' },
    { key: 'import', path: isBrand.value ? '/pages/brand/order-detail' : '/pages/import/import', icon: isBrand.value ? '/static/allOrders/allOrders.png' : '/static/tabbar/import.png' },
    { key: 'visitors', path: isBrand.value ? '/pages/message/message' : '/pages/visitors/visitors', icon: '/static/tabbar/visitors.png' },
    { key: 'record', path: isBrand.value ? '/pages/brand/all-orders' : '/pages/record/record', icon: '/static/tabbar/record.png' }
]);

const switchTo = (path) => {
    // 使用自定义tabbar时，强制使用 reLaunch 进行无原生tab切换
    uni.reLaunch({ url: path });
};
</script>

<style>
.custom-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 120rpx;
    padding: 16rpx 24rpx;
    display: flex;
    background: linear-gradient(180deg, #d9f0ff 0%, #e9f9ed 100%);
    backdrop-filter: blur(12rpx);
    box-shadow: 0 -8rpx 24rpx rgba(0,0,0,.08);
    z-index: 999;
}

.tab-item { flex: 1; display: flex; align-items: center; justify-content: center; opacity: 0.6; }
.tab-item.active { opacity: 1; }
.tab-icon { width: 56rpx; height: 56rpx; }

/* 占位，避免内容被自定义tabbar遮挡 */
.tabbar-placeholder { 
    height: 120rpx;
}

	/* PC宽屏时让固定底栏跟随居中容器，不铺满屏幕 */
	@media (min-width: 768px) {
		.custom-tabbar {
			left: 50%;
			right: auto;
			transform: translateX(-50%);
			width: 100%;
			max-width: 420px;
		}
	}
</style>


